<template>
  <div class="list">
     <van-nav-bar
      title="分类"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    fixed/>
    <div>
      <van-tabs v-model="active" @click="print">
        <van-tab
          v-for="item in navList"
          :key="item.id"
          :name="item.name"
          :title="item.name"
        ></van-tab>
      </van-tabs>
    </div>
    <div class="banner">
      <p>{{ active }}</p>
    </div>
    <ul>
      <router-link :to="`/category/list/info/${item.id}`" 
      tag="li"
      v-for="item in list" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <p class="title">{{ item.name }}</p>
        <p class="price">￥{{ item.retail_price }}</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
import { categoryNav, goodsList } from "@/api/category/list";
export default {
  data() {
    return {
      navList: [],
      active: "",
      list: [],
    };
  },
  created() {
    var id = this.$route.query.id;
    categoryNav({
      id,
    }).then((res) => {
      this.navList = res.navData;
      this.active = res.currentNav.name;
    });
    goodsList({
      categoryId: id,
    }).then((res) => {
      console.log(res);
      this.list = res.data;
    });
  },
  methods: {
    onClickLeft(){
        this.$router.go(-1)
    },
    // 找到点击的id,获取
    print(val) {
      // console.log(val, val1);
      var id = this.navList.find((ele) => ele.name == val).id;

      goodsList({
        categoryId: id,
      }).then((res) => {
        this.list = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      img {
        width: 350px;
        height: 350px;
      }
      .title {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        margin-left: 22px;
      }
      .price {
        font-size: 26px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 400;
        margin-left: 22px;
      }
    }
  }
  .banner {
    width: 710px;
    height: 150px;
    background-color: #ebdcad;
    margin: 26px auto;
    text-align: center;
    p {
      font-size: 32px;
      color: #000000;
      letter-spacing: 0;
      font-weight: 500;
      padding-top: 29px;
    }
  }
}
</style>